<template>
	<view>
		<!-- 搜索记录 -->
		<template v-if="!isSearch">
			<view class="search__record u-f">
				<view class="search__record__header u-f">
					<text class="search__record__header--title">搜索记录</text>
					<text class="icon iconfont icon-clean"></text>
				</view>
				<view class="search__record__body u-f">
					<block v-for="item in 11">
						<text>123</text>
					</block>
				</view>
			</view>
		</template>
		<!-- 显示列表 -->
		<template v-else>
			<view >
				<template v-if="newlist.length>0">
					<!-- 图文列表 -->
					<indexList v-for="(item1,index1) in newlist" :key="index1" :item="item1"/>
					<!-- 上拉加载 -->
					<loadMore :loadingText="loadingText"></loadMore>
				</template>
				<template v-else>
					<noThing/>
				</template>
			</view>	
		</template>
	</view>
</template>
<script setup>
	import indexList from '../../component/index/index-list.vue';
	import loadMore from '../../component/common/load-more.vue';
	import noThing from '../../component/common/no-thing/no-thing.vue';
	import {onReachBottom,onPullDownRefresh,onNavigationBarButtonTap,onNavigationBarSearchInputChanged,onNavigationBarSearchInputConfirmed} from '@dcloudio/uni-app';
	import {ref} from 'vue';
	import {searchPostApi} from '../../api/postApi.js';
	// 是否搜索过
	const isSearch = ref(false);
	
	const newlist = ref([]);
	const page = ref(1)
	const keyword = ref("")
					
					
	const loadingText = ref("上拉加载更多")
	
	
	function loadingScroll(){
		// 判断如果加载状态不等于加载更多
		if(loadingText.value!="上拉加载更多")return;
		loadingText.value="加载中...";
		search(true)
	}
	
	
	function search(isLoading){
		if(isLoading){
			searchPostApi(++page.value,keyword.value).then(res=>{
				
				console.log(res)
				newlist.value.push(...res)
				if(res.length<=0){
					loadingText.value="没有更多数据了";
				}else {
					loadingText.value="上拉加载更多";
				}
				
			})
		}else {
			searchPostApi(page.value,keyword.value).then(res=>{
				console.log(res)
				newlist.value.push(...res)
			})
		}
	}
	
	// 上拉触底事件
	onReachBottom(()=>{
		loadingScroll()
	})
	// 下拉刷新
	onPullDownRefresh(()=>{
		setTimeout(()=>{
			newlist.value=[];
			uni.stopPullDownRefresh();
		},1000)
	})
	
	// 监听原生标题导航按钮点击事件
	onNavigationBarButtonTap(e=>{
		if(e.index==0){
			uni.navigateBack(1)
			
		}
	},)
	
	function listener(){
			let timeId = 0;
			return (e)=>{
				clearTimeout(timeId)
				 timeId = setTimeout(()=>{
					 console.log(e.text)
					keyword.value = e.text;
				},500)
			}
	}
	// 监听标题输入事件
	onNavigationBarSearchInputChanged(listener())
	// 监听标题按下搜索键
	onNavigationBarSearchInputConfirmed(e=>{
		if(isSearch.value)return;
		isSearch.value = true;
		search()
		console.log(e.text)
	})
	
</script>

<style scoped lang="scss">
	.search__record {
		padding:30upx 40upx;
		width: 80%;
		flex-direction: column;
		&__header {
			justify-content: space-between;
			&--title {
				font-size: 36upx;
				font-weight: bold;
			}
		}
		&__body {
			margin: 20upx 0;
			flex: 1;
			flex-wrap: wrap;
			>text {
				width:50%;
				padding:10upx 0;
				box-sizing: border-box;
				
			}
		}
	}
</style>
